<template>
    <div id="map">
        <div class="MapTool">
            <el-select v-model="type" placeholder="请选择" @change="markerChange">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </div>
    </div>
</template>

<script>
    import Map from 'ol/Map';
    import TileLayer from 'ol/layer/WebGLTile';
    import View from 'ol/View';
    import {OSM, Vector} from 'ol/source';
    import GeoJSON from 'ol/format/GeoJSON';
    import WebGLPointsLayer from 'ol/layer/WebGLPoints';
    import icon from '../image/icon.png'

    let literalStyle;
    let pointsLayer;
    export default {
        name: "WebGLPointsSpriteLayer",
        data() {
            return {
                options: [{
                    value: 'icons',
                    label: '图标'
                }, {
                    value: 'triangles',
                    label: '三角形，颜色与人口有关'
                }, {
                    value: 'triangles-latitude',
                    label: '三角形，颜色与纬度有关'
                }, {
                    value: 'circles',
                    label: '圆圈，大小与人口有关'
                }, {
                    value: 'circles-zoom',
                    label: '圆圈，与缩放相关的大小'
                }, {
                    value: 'rotating-bars',
                    label: '旋转棒'
                }],
                value: '',
                type: "icons",
                predefinedStyles: {
                    'icons': {
                        symbol: {
                            symbolType: 'image',
                            src: icon,
                            size: [36, 48],
                            color: 'lightyellow',
                            rotateWithView: false,
                            offset: [0, 9],
                        },
                    },
                    'triangles': {
                        symbol: {
                            symbolType: 'triangle',
                            size: 18,
                            color: [
                                'interpolate',//线性插值
                                ['linear'],
                                ['get', 'population'],//根据人口信息数据插值
                                20000,
                                '#5aca5b',
                                300000,
                                '#ff6a19',
                            ],
                            rotateWithView: true,
                        },
                    },
                    'triangles-latitude': {
                        symbol: {
                            symbolType: 'triangle',
                            size: [
                                'interpolate',
                                ['linear'],
                                ['get', 'population'],//三角形大小根据人口插值
                                40000,
                                12,
                                2000000,
                                24,
                            ],
                            color: [
                                'interpolate',
                                ['linear'],
                                ['get', 'latitude'],//颜色根据纬度插值
                                -60,
                                '#ff14c3',
                                -20,
                                '#ff621d',
                                20,
                                '#ffed02',
                                60,
                                '#00ff67',
                            ],
                            offset: [0, 0],
                            opacity: 0.95,
                        },
                    },
                    'circles': {
                        symbol: {
                            symbolType: 'circle',//圆形的图标
                            size: [
                                'interpolate',
                                ['linear'],
                                ['get', 'population'],//根据人口插值圆图标的大小
                                40000,
                                8,
                                2000000,
                                28,
                            ],
                            color: '#006688',
                            rotateWithView: false,
                            offset: [0, 0],
                            opacity: [
                                'interpolate',
                                ['linear'],
                                ['get', 'population'],//透明度根据人口插值
                                40000,
                                0.6,
                                2000000,
                                0.92,
                            ],
                        },
                    },
                    'circles-zoom': {
                        symbol: {
                            symbolType: 'circle',
                            size: ['interpolate', ['exponential', 2.5], ['zoom'], 2, 1, 14, 32],//根据zoom缩放的层级插值调整圆的大小
                            color: '#240572',
                            offset: [0, 0],
                            opacity: 0.95,
                        },
                    },
                    'rotating-bars': {
                        symbol: {
                            symbolType: 'square',
                            rotation: ['*', ['time'], 0.1],//每一帧渲染都旋转0.1个弧度
                            size: [
                                'array',
                                4,
                                [
                                    'interpolate',
                                    ['linear'],
                                    ['get', 'population'],//根据人口信息插值旋转bar的大小
                                    20000,
                                    4,
                                    300000,
                                    28,
                                ],
                            ],
                            color: [
                                'interpolate',
                                ['linear'],
                                ['get', 'population'],//颜色根据人口信息数据插值
                                20000,
                                '#ffdc00',
                                300000,
                                '#ff5b19',
                            ],
                            offset: [
                                'array',
                                0,
                                [
                                    'interpolate',
                                    ['linear'],
                                    ['get', 'population'],//偏移量根据人口插值
                                    20000,
                                    2,
                                    300000,
                                    14,
                                ],
                            ],
                        },
                    },
                }
            };
        },
        mounted() {
            this.vectorSource = new Vector({
                url: 'http://localhost:8888/openlayer/geojson/world-cities.geojson',
                format: new GeoJSON(),
            });

            //初始化地图
            this.map = new Map({
                target: "map", //指定挂载dom，注意必须是id
                layers: [
                    new TileLayer({
                        source: new OSM(),
                    }),
                ],
                //配置视图
                view: new View({
                    center: [0, 0],
                    zoom: 0,
                }),
            });
            //图标样式的初始化
            const newLiteralStyle = this.predefinedStyles["icons"];
            this.refreshLayer(newLiteralStyle)
            // 动画调用图层
            this.animate();

        },
        methods: {
            markerChange(style) {
                //选择之后动态刷新图层
                const newLiteralStyle = this.predefinedStyles[style];
                try {
                    this.refreshLayer(newLiteralStyle);
                } catch (e) {
                    console.log(e);
                }
            },
            refreshLayer(newStyle) {
                //刷新webgl点图层的样式
                const previousLayer = pointsLayer;
                pointsLayer = new WebGLPointsLayer({
                    source: this.vectorSource,
                    style: newStyle,
                    disableHitDetection: true,//是否开启碰撞检测
                });
                //将webgl的点图层加入地图
                this.map.addLayer(pointsLayer);

                if (previousLayer) {
                    //前面的图层移除销毁
                    this.map.removeLayer(previousLayer);
                    previousLayer.dispose();
                }
                literalStyle = newStyle;
            },
            animate() {
                //手动渲染
                this.map.render();
                //浏览器内置的渲染，requestAnimationFrame在cpu闲置的情况下渲染，和setInterval是不一样的，setInterval是间隔多少秒渲染
                window.requestAnimationFrame(this.animate);
            }
        }
    };
</script>


<style scoped>
    #map {
        width: 100%;
        height: 100%;
    }

    .MapTool {
        position: absolute;
        top: .5em;
        right: .5em;
        z-index: 9999;
    }
</style>
